<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时任务调度中心</title>
    <link rel="stylesheet" href="https://unpkg.com/element-ui@2.14.1/lib/theme-chalk/index.css">
    <script src="https://unpkg.com/vue@2.6.12/dist/vue.js"></script>
    <script src="https://unpkg.com/element-ui@2.14.1/lib/index.js"></script>
    <script src="https://unpkg.com/axios@0.20.0/dist/axios.min.js"></script>
    <style>
        .customFont {
            font-size: 8px;
            color: darkgray;
        }
    </style>
</head>
<body>
<div id="app">
<!--    <h4 align="center">定时任务调度中心</h4>-->
    <el-button size="small" type="primary" plain @click="addButton" icon="el-icon-plus">添加</el-button>
<!--列表展示-->
    <template>
        <el-table :data="tableData" height="550" border style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-form-item label="类名:">
                            <span class="customFont">{{ props.row.beanName }}</span>
                        </el-form-item>
                        <el-form-item label="方法名:">
                            <span class="customFont">{{ props.row.methodName }}</span>
                        </el-form-item>
                        <el-form-item label="方法参数:">
                            <span class="customFont">{{ props.row.methodParams }}</span>
                        </el-form-item>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column label="任务备注" prop="remark"></el-table-column>
            <el-table-column label="cron表达式" prop="cronExpression"></el-table-column>
            <el-table-column label="更新时间" prop="updateTime"></el-table-column>
            <el-table-column label="状态" prop="jobStatus"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.jobStatus == 0" size="mini" type="success" @click="startButton(scope.$index, scope.row)">启动</el-button>
                    <el-button v-if="scope.row.jobStatus == 1" size="mini" type="danger" @click="endButton(scope.$index, scope.row)">暂停</el-button>
                    <el-button size="mini" type="warning" @click="handButton(scope.row)">手动执行</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>

<!--新增定时任务-->
    <el-dialog title="新增定时任务" :visible="addTaskForm" size="tiny" :modal-append-to-body='false' @close='closeDialog'>
        <el-form id="#addForm" ref="addForm" :model="addForm" label-width="90px">
            <el-form-item label="任务备注">
                <el-input v-model="addForm.remark"></el-input>
            </el-form-item>
            <el-form-item label="类名">
                <el-input v-model="addForm.beanName"></el-input>
            </el-form-item>
            <el-form-item label="方法名">
                <el-input v-model="addForm.methodName"></el-input>
            </el-form-item>
            <el-form-item label="方法参数">
                <el-input v-model="addForm.methodParams"></el-input>
            </el-form-item>
            <el-form-item label="cron表达式">
                <el-input v-model="addForm.cronExpression"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addSubmit(addForm)">立即创建</el-button>
                <el-button @click="addTaskForm = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</div>
<script>
    var vue = new Vue({
        el: '#app',
        data() {
            return {
                tableData: [],
                addTaskForm: false,
                addForm: {
                    remark: '',
                    beanName: '',
                    methodName: '',
                    methodParams: '',
                    cronExpression: ''
                }
            }
        },
        methods: {
            // 查询页面展示
            loadData () {
                axios.get('http://localhost:8083/timed/selectTimed')
                    .then(resp => {
                        console.log(resp)
                        if (resp.data.code === 0) {
                            this.tableData = resp.data.data;
                        } else {
                            alert('查询失败')
                        }
                    }).catch(resp => {
                        alert('查询失败')
                    })
            },
            // 添加页面弹出
            addButton() {
                this.addTaskForm = true;
            },
            // 添加页面取消
            closeDialog() {
                this.addForm = {};
                this.addTaskForm = false;
            },
            // 添加页面提交
            addSubmit(addForm) {
                axios.post('http://localhost:8083/timed/insertTimed', {
                    "beanName": addForm.beanName,
                    "methodName": addForm.methodName,
                    "methodParams": addForm.methodParams,
                    "remark": addForm.remark,
                    "cronExpression": addForm.cronExpression,
                }).then(resp => {
                    this.loadData()
                    this.addForm = {};
                    this.addTaskForm = false;
                }).catch(resp => {
                    alert('添加失败')
                })
            },
            // 启动按钮
            startButton(index, row) {
            //     const loading = this.$loading({
            //         lock: true,
            //         text: 'Loading',
            //         spinner: 'el-icon-loading',
            //         background: 'rgba(0, 0, 0, 0.7)'
            //     });
            //     setTimeout(() => {
            //         loading.close();
            // }, 2000);
                axios.post('http://localhost:8083/timed/updateStatus', {
                    "jobId":row.jobId,
                    "beanName": row.beanName,
                    "methodName": row.methodName,
                    "methodParams": row.methodParams,
                    "remark": row.remark,
                    "cronExpression": row.cronExpression,
                    "jobStatus": 1
                }).then(resp => {
                    this.loadData()
                }).catch(resp => {
                    alert('启动失败')
                })
            },
            // 暂停按钮
            endButton(index, row) {
                axios.post('http://localhost:8083/timed/updateStatus', {
                    "jobId":row.jobId,
                    "beanName": row.beanName,
                    "methodName": row.methodName,
                    "methodParams": row.methodParams,
                    "remark": row.remark,
                    "cronExpression": row.cronExpression,
                    "jobStatus": 0
                }).then(resp => {
                    this.loadData()
                }).catch(resp => {
                    alert('暂停失败')
                });
            },
            // 手动执行按钮
            handButton(row) {
                axios.post('http://localhost:8083/timed/executeTask', {
                    "beanName": row.beanName,
                    "methodName": row.methodName,
                    "methodParams": row.methodParams,
                }).then(resp => {
                    this.loadData()
                }).catch(resp => {
                    alert('手动执行一次失败')
                })
            },
        }
    })
    vue.loadData();
</script>
</body>
</html>